<template>
	<div>
		<a-card>
			<a-button type="primary" @click="handleAboutAdd">
				添加关于
			</a-button>
			<a-table
				:columns="columns" 
				:data-source="page.list" 
				rowKey="aboutId"
				bordered
				:pagination="false"
				:loading="loading">
				<template slot="enable" slot-scope="text,record">
					<a-switch 
						:default-checked="text == 0 ? false : true"
						:disabled="disable"
						@change="enableAbout(record.aboutId, text)"/>
				</template>
				<template slot="operation" slot-scope="text,record">
					<div class="editable-row-operations">
						<a-button type="link" @click="handleAboutRead(record.aboutId)">
							查看
						</a-button>
						<a-button type="primary" @click="handleAboutEdit(record.aboutId)">
							修改
						</a-button>
						<a-popconfirm title="你确定要删除吗？" ok-text="Yes" cancel-text="No" @confirm="deleteAbuut(record.aboutId)">
							<a-button type="danger">
								删除
							</a-button>
						</a-popconfirm>
					</div>
				</template>
			</a-table>
			<a-pagination
				v-model="page.currentPage"
				:page-size-options="['5','10','20','50']"
				:total="page.totalCount"
				show-size-changer
				:page-size="page.pageSize"
				@showSizeChange="onSizeChange"
				@change="onPageChange">
			</a-pagination>
		</a-card>
	</div>
</template>

<script>
	import {aboutColumns as columns} from '@/assets/js/tableList/ContentTable.js'
	import {getAboutByPage, enableAbout, deleteAboutById} from '@/api/Content.js'
	export default {
		name: 'AboutList',
		data () {
			return {
				loading: true,
				columns: [],
				disable: false,
				page: {
					currentPage: 1, // 当前页
					pageSize: 5, // 每页显示条数
					totalPage: 0, // 总页数
					totalCount: 0, // 总条数
					params: {}, // 查询参数对象
					list: [], // 数据
					sortColumn: '', // 排序列
					sortMethod: 'asc' // 排序方式
				}
			}
		},
		created() {
			this.initList()
			this.getAboutList()
		},
		methods: {
			// 加载 about 列表
			async getAboutList() {
				const {data : res} = await  getAboutByPage(this.page)
				// console.log(res)
				if (res.code !== 20005) 
					return this.$message.error('列表加载出错')
				this.page = res.data
				this.page.index = undefined
				this.loading = false
			},
			initList() {
				this.columns = columns
			},
			// 开启 about
			async enableAbout (id, status) {
				let state = status == 1 ? 0 : 1
				this.disable = true
				const {data:res} = await enableAbout(id, state)
				// console.log(res)
				setTimeout(()=>{
					this.disable = false
				},800)
				if (res.code === 20008) {
					this.$message.success(res.msg)
				}
				if (res.code === 30003) {
					this.$message.error(res.msg)
					this.getAboutList()
				}
			},
			onPageChange (newPage) {
				this.page.currentPage = newPage
				this.getAboutList()
			},
			// 页面变化
			onSizeChange(current, newSize) {
				this.page.pageSize = newSize;
				this.getAboutList()
			},
			// 添加关于
			handleAboutAdd() {
				this.$router.push('/content/about/edit')
			},
			// 修改页面
			handleAboutEdit (id) {
				this.$router.push(`/content/about/edit?aboutId=${id}`)
			},
			// 阅读
			handleAboutRead (id) {
				this.$router.push(`/content/about/detail?aboutId=${id}`)
			},
			// 删除
			async deleteAbuut (id) {
				const {data : res} = await deleteAboutById(id)
				if (res.code !== 20003)
					return this.$message.error('删除失败')
				// 基于 ajax 删除
				let arr = this.page.list
				arr.forEach((item, index, res) => {
					if (item.aboutId == id) {
						res.splice(index,1)
					}
				})
				this.page.list = arr
				this.$message.success(res.msg)
			}
		}
	}
</script>

<style>
</style>